<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用response.data读取JSON数据</title>
<script src="vue.js"></script>
<!-- 导入 axios -->
<script src="axios.js"></script>
</head>
<body>
<div id="app">
  <h3>图书列表</h3>
  <div
    v-for="book in mybooks">
    {{ book.bookName }}
  </div>
</div>
<script type="text/javascript">
new Vue({
    el: '#app',
    data () {
      return {
        mybooks: null
      }
    },
    mounted () {
        // 回调函数需要使用箭头函数（this Vue实例，不然this代表window）
        // 获取到的数据存在response.data中
      axios
        .get('./data/books.json')
        .then(response => (this.mybooks = response.data.books))
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
    }
})
</script>
</body>
</html>